<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Visualization Control: FilterDataTableControl : FilterColumnControl - Institute for Systems Biology Visualizations</title>

    <script src="http://code.google.com/js/codesite.pack.01312008.js" type="text/javascript"></script>
    <link href="http://code.google.com/css/codesite.pack.01312008.css" type="text/css" rel="stylesheet"></link>

    <!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css" /><![endif]-->

    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/trunk/src/main/js/load.js"></script>
</head>

<body class="gc-documentation">

<div id="gc-container">
<a name="top"></a>

<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>

<div id="gc-topnav">
    <h1>Visualization Control: FilterColumnControl</h1>

    <ul id="docs" class="gc-topnav-tabs">

        <li id="home_link">
            <a href="http://systemsbiology.org/" title="Institute for Systems Biology">Home</a>
        </li>

        <li id="docs_link">
            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" class="selected"
               title="Systems Biology Visualizations Documentation">Docs</a>
        </li>

        <li id="code_link">
            <a href="http://code.google.com/p/systemsbiology-visualizations/" title="Code Repository In Google Code">Code</a>
        </li>

        <li>
            <a href="http://groups.google.com/group/systemsbiology-visualizations" title="Systems Biology Visualization Group">Group</a>
        </li>
    </ul>
</div>
<div class="g-section g-tpl-170">

<div id="gc-pagecontent">

<div class="toc">
    <ol>
        <li><a href="#Audience">Audience</a>
        <li><a href="#Introduction">Introduction</a>
        <li><a href="#Example">Example</a>
        <li><a href="#Methods">Methods</a>
        <li><a href="#Data_Policy">Data Policy</a>
        <li><a href="#Custom_Filter_Column_Control">Custom Filter Column Controls</a>

    </ol>
</div>

<h1><a name="Audience" id="Audience"></a>Audience</h1>
This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts.

It is recommended that you are familiar with the Visualizations API, <code>DataTables</code>, and the
<a href="FilterDataTableControl.html"><code>FilterDataTableControl</code></a> before reading this document.

<h1><a name="Introduction" id="Introduction"></a>Introduction</h1>
The <code>FilterColumnControl</code> is a sub-component of the <code>FilterDataTableControl</code>.  It is responsible
for rendering a filter criteria for a column in a <code>DataTable</code>.

The <code>FilterDataTableControl</code> can be customized by specifying custom <code>FilterColumnControls</code>.  These
can be generically associated with a data type or specifically with a particular column in the target <code>DataTable</code>.

<p>
Although they are not meant to be used outside of a parent control, <code>FilterColumnControls</code> follow the Visualization API,
and can be loaded and operated on independently (see example below).

<p>
    By: Hector Rovira for the Institute for Systems Biology (ISB)<br/>
    <strong>This work was made possible by funding from "The Systems Approach to Immunity and Inflammation Contract" (HHSN272200700038C) from the National Institute of Allergy and Infectious Diseases (NIAID)</strong>
</p>

<h1><a name="Example" id="Example"></a>Example</h1>
<pre class="prettyprint">
    &lt;div id="dataTableContainer"&gt;
    &lt;/div&gt;
    &lt;div id="stringFccContainer"&gt;
    &lt;/div&gt;
    &lt;div id="numberFccContainer"&gt;
    &lt;/div&gt;
    &lt;div id="booleanFccContainer"&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
        google.load("prototype", "1.6.0.2");
        google.load("scriptaculous", "1.8.1");
        google.load("visualization", "1", {packages:["table", "linechart"]});
    &lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        systemsbiology.load("visualization", "1.0", {packages:["filterDataTableControl"]});
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        var data = new google.visualization.DataTable();
        data.addColumn("string", "Name");
        data.addColumn("number", "Height");
        data.addColumn("number", "Age");
        data.addColumn("boolean", "Girl?");
        data.addRows(4);
        data.setCell(0, 0, "Hector");
        data.setCell(0, 1, 67);
        data.setCell(0, 2, 33);
        data.setCell(0, 3, false);
        data.setCell(1, 0, "Isola");
        data.setCell(1, 1, 30);
        data.setCell(1, 2, 3);
        data.setCell(1, 3, true);
        data.setCell(2, 0, "Mindy");
        data.setCell(2, 1, 64);
        data.setCell(2, 2, 33);
        data.setCell(2, 3, true);
        data.setCell(3, 0, "Jacek");
        data.setCell(3, 1, 25);
        data.setCell(3, 2, 1);
        data.setCell(3, 3, false);

        var tableA = new google.visualization.Table($("dataTableContainer"));
        tableA.draw(data);

        var stringFcc = new org.systemsbiology.visualization.SelectDistinctValuesStringFilterColumnControl($("stringFccContainer"));
        stringFcc.draw(data, {assignedColumnIndex:0});

        var numberFcc = new org.systemsbiology.visualization.SimpleOperatorNumberFilterColumnControl($("numberFccContainer"));
        numberFcc.draw(data, {assignedColumnIndex:2});

        var booleanFcc = new org.systemsbiology.visualization.SimpleChoiceBooleanFilterColumnControl($("booleanFccContainer"));
        booleanFcc.draw(data, {assignedColumnIndex:3});
        
        $("testFilters").onclick = function() {
            var passingRows = new Array();
            var appendOnPass = function(fcc, rowIndex, columnIndex) {
                if (fcc.isActive()) {
                    var value = data.getValue(rowIndex, columnIndex);
                    if (fcc.passes(value)) {
                        passingRows[passingRows.length] = rowIndex+1;
                    }
                }
            }

            for (var i = 0; i < data.getNumberOfRows(); i++) {
                appendOnPass(stringFcc, i, 0);
                appendOnPass(numberFcc, i, 2);
                appendOnPass(booleanFcc, i, 3);
            }
            alert("test filters passed: " + passingRows.uniq().sort().toString());
        }

        $("resetFilters").onclick = function() {
            stringFcc.resetFilter();
            numberFcc.resetFilter();
            booleanFcc.resetFilter();
        }
    &lt;/script&gt;    
</pre>

<p><strong>Data Table</strong>
<div id="dataTableContainer">
</div>

<p><strong>Name Filter</strong>
<div id="stringFccContainer">
</div>

<p><strong>Age Filter</strong>
<div id="numberFccContainer">
</div>

<p><strong>Girl? Filter</strong>
<div id="booleanFccContainer">
</div>
<button id="testFilters">Test Filters</button>
<button id="resetFilters">Reset Filters</button>

<script type="text/javascript">
    google.load("prototype", "1.6.0.2");
    google.load("scriptaculous", "1.8.1");
    google.load("visualization", "1", {packages:["table"]});
</script>

<script type="text/javascript">
    systemsbiology.load("visualization", "1.0", {packages:["filterDataTableControl"]});
</script>
<script type="text/javascript">
    var data = new google.visualization.DataTable();
    data.addColumn("string", "Name");
    data.addColumn("number", "Height");
    data.addColumn("number", "Age");
    data.addColumn("boolean", "Girl?");
    data.addRows(4);
    data.setCell(0, 0, "Hector");
    data.setCell(0, 1, 67);
    data.setCell(0, 2, 33);
    data.setCell(0, 3, false);
    data.setCell(1, 0, "Isola");
    data.setCell(1, 1, 30);
    data.setCell(1, 2, 3);
    data.setCell(1, 3, true);
    data.setCell(2, 0, "Mindy");
    data.setCell(2, 1, 64);
    data.setCell(2, 2, 33);
    data.setCell(2, 3, true);
    data.setCell(3, 0, "Jacek");
    data.setCell(3, 1, 25);
    data.setCell(3, 2, 1);
    data.setCell(3, 3, false);

    var tableA = new google.visualization.Table($("dataTableContainer"));
    tableA.draw(data, {showRowNumber:true});

    var stringFcc = new org.systemsbiology.visualization.SelectDistinctValuesStringFilterColumnControl($("stringFccContainer"));
    stringFcc.draw(data, {assignedColumnIndex:0});

    var numberFcc = new org.systemsbiology.visualization.SimpleOperatorNumberFilterColumnControl($("numberFccContainer"));
    numberFcc.draw(data, {assignedColumnIndex:2});

    var booleanFcc = new org.systemsbiology.visualization.SimpleChoiceBooleanFilterColumnControl($("booleanFccContainer"));
    booleanFcc.draw(data, {assignedColumnIndex:3});

    $("testFilters").onclick = function() {
        var passingRows = new Array();
        var appendOnPass = function(fcc, rowIndex, columnIndex) {
            if (fcc.isActive()) {
                var value = data.getValue(rowIndex, columnIndex);
                if (fcc.passes(value)) {
                    passingRows[passingRows.length] = rowIndex+1;
                }
            }
        }

        for (var i = 0; i < data.getNumberOfRows(); i++) {
            appendOnPass(stringFcc, i, 0);
            appendOnPass(numberFcc, i, 2);
            appendOnPass(booleanFcc, i, 3);
        }
        alert("test filters passed: " + passingRows.uniq().sort().toString());
    }

    $("resetFilters").onclick = function() {
        stringFcc.resetFilter();
        numberFcc.resetFilter();
        booleanFcc.resetFilter();
    }
</script>

<p/>

<h1><a name="Methods" id="Methods"></a>Methods</h1>

<p>
<table>
    <tr>
        <th>Method</th>
        <th>Return Type</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><code>draw(data, options)</code></td>
        <td>none</td>
        <td>Draws the <code>FilterColumnControl</code>, drawing filter criteria inputs</td>
    </tr>
    <tr>
        <td><code>isActive()</code></td>
        <td>boolean</td>
        <td>Indicates whether there is an active filter criteria; filter should not be evaluated if not active</td>
    </tr>
    <tr>
        <td><code>passes(value)</code></td>
        <td>boolean</td>
        <td>Tests the value against the selection criteria and indicates if it passes or not</td>
    </tr>
    <tr>
        <td><code>resetFilter()</code></td>
        <td>none</td>
        <td>Clears the <code>FilterColumnControl</code> filter criteria</td>
    </tr>
</table>
</p>

<h1><a name="Data_Policy" id="Data_Policy"></a>Data Policy</h1>

<p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
</p>

<h1><a name="Custom_Filter_Column_Control" id="Custom_Filter_Column_Control"></a>Custom Filter Column Controls</h1>
<p>
<strong>Note: Planning to release soon.  Not yet implemented.</strong>
<p>
There will be two ways to include a custom <code>FilterColumnControl</code> in the <code>FilterDataTableControl</code>
    <ul>
    <li>Register your custom implementation for all columns of a particular data type
<pre class="prettyprint">filterColumnControlsByDataType = {
       stringType: { impl: myCustomStringImpl, options: myStringOptions },
         dateType: { impl: myCustomDateImpl, options: myDateOptions },
     datetimeType: { impl: myCustomDateTimeImpl, options: myDateTimeOptions },
    timeofdayType: { impl: myCustomTimeofdayImpl, options: myTimeofdayOptions }
}</pre>
    </li>
    <li>Register your custom implementation for a particular column
<pre class="prettyprint">filterColumnControlsByColumnIndex = {
    column_0: { impl: myCustomStringImpl, options: myStringOptions },
    column_1: { impl: myCustomDateImpl, options: myDateOptions },
    column_3: { impl: myCustomDateTimeImpl, options: myDateTimeOptions },
    column_5: { impl: myCustomTimeofdayImpl, options: myTimeofdayOptions }
}</pre>
    </li>
</div>
</div>

</div>

<div id="gc-footer" dir="ltr">
    <div id="gc-footer-img"></div>
    <div class="text">

        &copy;2008 Institute for Systems Biology -
        <a href="http://www.systemsbiology.org">ISB Home</a> -
        <a href="http://code.google.com/p/systemsbiology-visualizations/">Code Home</a>
    </div>
</div>
<!-- end gc-footer -->

</div>
<!-- end gc-containter -->
</body>
</html>

